<template>
  <div class="topbar">
    <!--顶部悬浮条-->
    <div class="biaoti-top">
      <div class="biaoti">
        <div class="a" @click="GoHome">欢迎访问亦廉之窗</div>
        <!-- http://uat.nlxdt.com:19002 -->
        <div class="b"  @click="goScreen">
          <!-- <a href="http://uat.nlxdt.com:19002">数据大屏</a> -->
          数据大屏
        </div>
      </div>
    </div>
    <!--<img :src="beijing" alt class="BackgroundPic" />-->
    <div class="block BackgroundPic">
      <el-carousel trigger="click" height="455px" style="overflow:hidden !important;" arrow="never">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <!--
          <img :src="baseUrl+item.picUrl" alt :key="item.id" :id="item.id" class="img-banner" />-->
          <div
            class="background-color"
            :style="{backgroundImage:'url(' + baseUrl+item.picUrl+ ')', 
        backgroundRepeat:'no-repeat',backgroundSize: 'cover',backgroundPosition:'center'}"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--路由导航-->
    <ul class="top">
      <li class="item">
        <router-link to="/Abstractted">系统简介</router-link>
      </li>

      <li class="item">
        <router-link to="/report">监督举报</router-link>
      </li>
      <li class="item">
        <router-link to="/forum">清风论坛</router-link>
      </li>
      <li class="item">
        <router-link to="/Risk">风险防控</router-link>
      </li>
      <li class="item">
        <router-link to="/PartyDiscipline">党纪法规</router-link>
      </li>
      <li class="item">
        <router-link to="/MakeInspectionTour">巡视巡察</router-link>
      </li>
      <li class="item">
        <router-link to="/Investigate">审查调查</router-link>
      </li>
      <li class="item">
        <router-link to="/archives">组织机构</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
 import { getCMSUrl1 } from "@/utils/tools.js";
export default {
  data() {
    return {
      LogoPic: require("@/assets/image/logo.png"),
      //  参数1
      params: {
        picCode: "BGPIC",
      },
      //轮播列表
      imgList: [],
      PICsPACE: localStorage.getItem("picSpace"),
    };
  },
  methods: {
    // 数据大屏
    goScreen() {
      let token = sessionStorage.getItem("Login_token");
    
      if(token){
     window.open(`${getCMSUrl1()}?token=${token}`, "_blank");
      }else{
        window.open('http://uat.nlxdt.com:19002')  
      }
      
    },

    OpenLogo() {
      document.getElementsByTagName("body")[0].className = "loaded";
    },
    GoHome() {
      this.$router.push({
        name: "home",
      });
    },
    //首页背景图获取
    get() {
      this.Api.getbanner(this.params).then((res) => {
        if (res.code == 0) {
          // console.log(res,1111)
          this.imgList = res.data;
          // console.log(this.imgList);
        }
      });
    },
  },
  computed: {
    baseUrl() {
      return this.$store.state.fileIp;
    },
  },
  created() {
    this.get();
    // console.log(this.baseUrl,"图PIN路径")
    // this.Api.getIp().then((res) => {
    //   // console.log(res,"1111")
    //   sessionStorage.setItem("picSpace", res.data);
    //   // let a  = sessionStorage.getItem("picSpace");

    //   // console.log(this.PICsPACE,"你好")
    // });
  },
};
</script>

<style lang="less" scoped>
.BackgroundPic {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

//banner图的修改
.img-banner {
  // width: 100%;
  // height: 100%;
  object-fit: cover;
}

/deep/ .router-link-active {
  display: block;
  width: 150px;
  background: #dd2126 !important;
}

.topbar {
  width: 100%;
  height: 455px;
  /*background: url(../../assets/image/头部背景.png) no-repeat;*/
  display: flex;
  align-items: flex-end;
  position: relative;
}

a {
  display: inline-block;
  color: white;
  width: 100%;
}

/*.router-link-active{
  background-color: #dd2126;
}*/
.item {
  width: 150px;
  font-size: 22px;
  /*padding: 0 20px;*/
  /*background:rgba(0,0,0,0.7);*/
  cursor: pointer;
  text-align: center;
  line-height: 48px;
  color: white;
}

.item:hover {
  background-color: #dd2126;
}

.top {
  width: 1200px;
  display: flex;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

.biaoti {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.biaoti-top {
  position: absolute;
  top: 0;
  width: 100%;
  background: rgba(242, 242, 242, 0.7) !important;
  border-radius: 3px;
  z-index: 1000;
}

.a,
.b {
  height: 20px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 20px;
  padding: 8px 0;
  cursor: pointer;
}

.b a {
  height: 20px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 20px;
  padding: 0px 0;
  cursor: pointer;
}

.b a:hover {
  color: red;
}

.a:hover {
  color: red;
}

.background-color {
  height: 457px;
}
</style>
